<template>
	<ul class="footer">
	  <li :class="{ 'is-active': currentRoute === 'index' }" @click="goToIndex">
		<i class="fa fa-home"></i>
		<p>首页</p>
	  </li>
	  <li :class="{ 'is-active': currentRoute === 'discover' }" @click="toBusinessList(1)">
		<i class="fa fa-compass"></i>
		<p>发现</p>
	  </li>
	  <li :class="{ 'is-active': currentRoute === 'orderlist' }" @click="goToOrderlist">
		<i class="fa fa-file-text-o"></i>
		<p>订单</p>
	  </li>
	  <li :class="{ 'is-active': currentRoute === 'wode' }" @click="goToWode">
		<i class="fa fa-user-o"></i>
		<p>我的</p>
	  </li>
	</ul>
  </template>
  
  <script>
  export default {
  data() {
    return {
      currentRoute: 'index',
    };
  },
  watch: {
    '$route'(to, from) {
      this.updateActiveRoute(to.path);
    }
  },
  methods: {
    updateActiveRoute(path) {
      const routes = {
        '/': 'index',
        '/businessList': 'discover',
        '/orderList': 'orderlist',
        '/userProfile': 'wode'
      };
      this.currentRoute = routes[path] || 'index';
    },
    goToIndex() {
      this.$router.push('/');
    },
    toBusinessList(orderTypeId) {
      this.$router.push({ path: '/businessList', query: { orderTypeId: orderTypeId } });
    },
    goToOrderlist() {
      this.$router.push('/orderList');
    },
    goToWode() {
      this.$router.push('/userProfile');
    }
  },
  created() {
    this.updateActiveRoute(this.$route.path);
  }
}
  </script>
  
  <style>
  .wrapper .footer {
	width: 100%;
	height: 14vw;
	
	background-color: #fbfbfb; /* 浅灰色背景 */
  
	position: fixed;
	left: 0;
	bottom: 0;
  
	display: flex;
	justify-content: space-around;
	align-items: center;
  }
  
  .wrapper .footer li {
	/* li本身的尺寸完全由内容撑起 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  
	color: #b3b3b3;
	user-select: none;
	cursor: pointer;
  }
  
  .wrapper .footer li.is-active {
	color: #0097FF; /* 选中时的颜色 */
  }
  
  .wrapper .footer li.is-active p:after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #fbfbfb; /* 选中时的标识颜色 */
	margin-top: 0.5vw;
  }
  
  .wrapper .footer li p {
	font-size: 2.8vw;
  }
  
  .wrapper .footer li i {
	font-size: 5vw;
  }
  </style>